<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户中心-组织机构--TAROCO</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
</head>
<body style="padding: 10px">
<div class="layui-form">
    <div class="layui-form-item">
        <button class="layui-btn">新增下级机构</button>
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-md4">
        <ul id="orgTree"></ul>
    </div>
    <div class="layui-col-md8">
        <table id="orgTable"></table>
    </div>
</div>
</body>

<script type="text/javascript" src="../../layui/layui.js"></script>
<script>
    var baseUrl = "";
    layui.use(['tree','table','layer','element','jquery'], function(){
         var form = layui.form,
            table = layui.table,
            element = layui.element;
        $ = layui.$;
        layer = parent.layer === undefined ? layui.layer : top.layer;

        // 获取树节点数据
        var getOrgNodes = function () {
            var arr = [];
            for(var i = 1; i < 10; i++){
                arr.push({
                    id : i,
                    name: i.toString(),
                    spread: true
                });
            }
            return arr;
        };

        // 获取表结构数据
        var getOrgTableData = function (id) {
            layer.msg('当前节id：'+ id);
        };

        // 树结构初始化
        layui.tree({
            elem: '#orgTree',
            nodes: getOrgNodes(),
            click: function(item){ //点击节点回调
               getOrgTableData(item.id);
            }
        });

        // 表格结构初始化
        table.render({
            elem: '#orgTable',
            height: 315,
            page: true,
            cols: [[ //表头
                {field: 'id', title: 'ID', hidden: true},
                {field: 'name', title: '组织机构名称'},
                {field: 'sex', title: '操作', toolbar: '#orgTableBar'}
            ]]
        });
    });
</script>

<script type="text/html" id="orgTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>